<template>
    <view class="teach-list">
        <view class="kingListBox">
            <view class="table-header">
                <view class="header-item rank">排名</view>
                <view class="header-item name">姓名</view>
                <view class="header-item amount">总金额</view>
                <view class="header-item time">总时长(小时)</view>
            </view>
            <view class="z-item" v-for="(item, index) in teachList" @click="goTutorDetail(item)" :key="index">
                <view class="kingState" style="text-align: center;" v-if="index >= 3" >{{ index + 1 }}</view>

                <view class="kingState" v-if="index === 0">
                    <image class="king-img" src="@/static/images/king1.png" mode="" />
                </view>

                <view class="kingState" v-if="index === 1">
                    <image class="king-img" src="@/static/images/king2.png" mode="" />
                </view>

                <view class="kingState" v-if="index === 2">
                    <image class="king-img" src="@/static/images/king3.png" mode="" />
                </view>

                <view class="userBox" style="display: flex;align-items: center;justify-content: space-between;width: 90%;" >
                    <view class="userInfoBox" style="display: flex;align-items: center;justify-content: center;" >
                        <image class="userimg" :src="item.imageUrl" mode="" />
                        <view class="userName" style="margin-left: 10rpx;">{{ item.tutorName }}</view>
                    </view>
                    <view class="money" style="text-align: right;">￥{{ item.income }}</view>
                    <view class="time">{{ item.workTime }}</view>
                </view> 
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { getReportTopList } from '@/api/dataCenter/index'
const teachList = ref([])

// 跳转助教详情
const goTutorDetail = (item) => {
    if(item.userId) {
        uni.navigateTo({
            url: `/pages/teachDataCenter/teachDataCenter?userId=${item.userId}`
        })
    } else {
        uni.showToast({
            title: '暂未登录',
            icon: 'none'
        })
    }
}

// // 计数器
// let count = 0
// const maxCount = 5 // 15秒/3秒 = 5次

// // 获取助教列表
// const getTeachList = async () => {
//     try {
//         const res = await getReportTopList()
//         if(res.code === 200) {
//             teachList.value = res.result
//             return // 接口返回成功码立即结束递归
//         }
//     } catch (error) {
//         console.error('获取助教列表失败:', error)
//     }
    
//     count++
//     // 达到最大次数或接口返回失败时继续递归
//     if(count < maxCount) {
//         setTimeout(() => {
//             getTeachList()
//         }, 3000)
//     }
// }

// // 首次调用
// getTeachList()





// 获取助教列表
const getTeachList = async () => {
    console.log('getTeachList')
    const res = await getReportTopList()
    teachList.value = res.result
}
getTeachList()

</script>

<style lang="scss" scoped>
.teach-list{
    width: calc(100vw - 40rpx);
    min-height: 100vh;
    padding: 20rpx;
    background: linear-gradient( 180deg, #DFEBFF 0%, #FFFFFF 46%), linear-gradient( 268deg, #A4F9FF 0%, #E7E0FF 100%);
}

.kingListBox {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
}

.z-item {
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 0;
}

.kingState {
    width: 80rpx;
    text-align: center;
}

.userBox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userInfoBox {
    width: 180rpx;
    display: flex;
    align-items: center;
}

.userBox .userimg {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.userBox .userName {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-left: 10rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.money {
    width: 200rpx;
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

.time {
    width: 120rpx;
    color: #666;
    font-size: 26rpx;
    text-align: center;
}

.king-img {
    width: 64rpx;
    height: 64rpx;
    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
}

.table-header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #eee;
    margin-bottom: 20rpx;
    font-weight: bold;
    color: #333;
}

.header-item {
    font-size: 28rpx;
}

.header-item.rank {
    width: 80rpx;
    text-align: center;
}

.header-item.name {
    width: 180rpx;
    text-align: center;
}

.header-item.amount {
    width: 200rpx;
    text-align: right;
}

.header-item.time {
    width: 160rpx;
    text-align: right;
    font-size: 18rpx;
    margin-left: 40rpx;
}

</style>
